<template>
  <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(item,index) in list"
  :key="index" class="aaa">
  <img class="bbb" :src="item.image_url" alt="">
  </van-swipe-item>
</van-swipe>

<van-grid :border="false" :column-num="5">
  <van-grid-item v-for="(item,index) in goods.channel"
  :key="index" @click="tiao">
  <img :src="item.icon_url" />
  {{item.name}}
  </van-grid-item>
</van-grid>

  <div class="cnter"><p>品牌制造商宣工</p></div>
<div class="xiao">
  <div class="tian" v-for="(item,index) in goods.brandList" :key="index">
    <img :src="item.new_pic_url" alt="">
    <span>{{item.name}}</span>
    <b>{{item.floor_price}}</b>
  </div>
</div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[],
      goods:[]
    }
  },
  methods:{
    tiao(id){
      this.$router.push({path:"/fenlei",query:{id}})
    }
  },
  mounted(){
    this.$axios.get("http://shop.bufantec.com/bufan/index/index").then((res)=>{
      this.list = res.data.banner
      console.log(res);
    });
    this.$axios.get("http://shop.bufantec.com/bufan/index/index").then((res)=>{
      this.goods = res.data
      console.log(res);
    });
  },
  
}
</script>

<style lang="scss">
.my-swipe{
  width: 100%;
  height: 28vh;
}
.bbb{
    width: 100%;
  height: 28vh;
}
.bbb img{
  width: 100%;
  height: 100%;
}
.cnter{
  width: 100%;
  height: 35px;
  text-align: center;
  font-size: 15px;
  font-weight:max($numbers: 999);
  color: black;
}
.xiao{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.tian{
  width: 48%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  img{
    width: 100%;
    height: 100%;
    justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  }
}
span{
  z-index: 9999;
  position:fixed;
  margin: 6px;

}
b{
  z-index: 999;
  position:fixed;
  margin-top: 65px;
}
</style>